<!--
 * @Author: Bennty
 * @Date: 2024-07-24 16:48:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-20 14:56:07
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" title="福利审批">
        <el-form>
            <el-form-item label="申请时间">
                <span>{{ props.data.applyDate }}</span>
            </el-form-item>
            <el-form-item label="申请人">
                <span>{{ props.data.applyPersonName }}</span>
            </el-form-item>
            <el-form-item label="客户星级">
                <span class="level-one" v-if="props.data.level == '1'">一级客户</span>
                <span class="level-two" v-else-if="props.data.level == '2'">二级客户</span>
                <span class="level-three" v-else-if="props.data.level == '3'">三级客户</span>
                <span class="level-four" v-else-if="props.data.level == '4'">四级客户</span>
                <span class="level-five" v-else-if="props.data.level == '5'">五级客户</span>
            </el-form-item>
            <el-form-item label="申请产品">
                <span>{{ props.data.applyProduct }}</span>
                <el-image style="width: 150px; height: 150px" :src="props.data.showImage" fit="fill"></el-image>
            </el-form-item>
            <el-form-item label="申请数量">
                <span>{{ props.data.applyNum + ' 个'}}</span>
            </el-form-item>
            <el-form-item label="申请理由">
                <span>{{ props.data.applyReason }}</span>
            </el-form-item>
            <el-form-item label="查看凭证">
                <!-- <el-button v-for="item,index in applyCertificate" :key="index" link type="primary" @click="onCheckApplyCertificate(item)">{{ `图片${index + 1}` }}</el-button> -->
                <el-button  link type="primary" @click="onCheckApplyCertificate(props.data.fileUrl)">{{ `图片` }}</el-button>

            </el-form-item>
        </el-form>
        <el-image-viewer v-if="showImageViewer" @close="onCloseCheckCertificate" :url-list="checkedCertificate" ></el-image-viewer>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handlePassApply" >通过</el-button>
                <el-button type="danger" @click="handleRejectApply">拒绝</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { applyWelfareApi } from '@/api/sj/welfareExamine-crm/index';

const props = defineProps(['visible','data']);
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();
const applyCertificate = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
]);
const checkedCertificate = ref<string[]>([]);

const showImageViewer = ref(false);

const onCheckApplyCertificate = (url:string)=>{
    checkedCertificate.value.push(url);
    showImageViewer.value = true;
};

const onCloseCheckCertificate = ()=>{
    checkedCertificate.value = [];
    showImageViewer.value = false;
};

const handlePassApply = async () => {
    const submitData = {
        id: props.data.id,
        approvalStatus: 2
    };
    const result = await applyWelfareApi(submitData);
    if(result.code == 200){
        emits('submit',true);
        handleClose();
    }else{
        emits('submit',false);
    };
};

const handleRejectApply = async () => {
    const submitData = {
        id: props.data.id,
        approvalStatus: 3
    };
    const result = await applyWelfareApi(submitData);
    if(result.code == 200){
        emits('submit',true);
        handleClose();
    }else{
        emits('submit',false);
    };
};

const handleClose = ()=>{
    formRef.value?.resetFields();
    emits('close');
};
</script>

<style lang="scss" scoped>
.level-one,.level-two {
    color:yellowgreen
}
.level-three,.level-four{
    color: orange;
}
.level-five{
    color: red
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>